<template>
  <!-- 最简竖柱状图 -->
  <div style="height:300px;width:100%;overflow: hidden;">
    <Row v-if="option.series.length==0" class="bg-fff" style="height:300px;" type="flex" align="middle" justify="center">
      <img src="~@/assets/img/efficiencyAnalysis/zwsj.png" height="50%" />
    </Row>
    <div ref="main" style="overflow: hidden;height:300px;"></div>
  </div>
</template>

<script>
import { Style } from "./echartsStyle.js";
export default {
  props: {
    viewData: {
      type: Object,
      default: null
    },
    lineColor:{
      type:String,
      default:'#666',//测试要求线条颜色以及文字颜色
    },
  },
  data() {
    return {
      option: {
        legend: {
          data:
            this.viewData != null && "lData" in this.viewData
              ? this.viewData.lData
              : []
        },
        tooltip: {
          trigger: "none",
          axisPointer: {
            type: "cross"
          }
        },
        grid: Style.grid,
        color: Style.color,
        xAxis: this.viewData != null ? this.viewData.xData : [],
        yAxis: {
          name: this.viewData != null ? this.viewData.yName : "",
          type: "value",
          nameTextStyle: {
            padding: [15, 15]
          },
          nameGap:30
        },
        series: this.viewData != null ? this.viewData.sData : []
      }
    };
  },
  computed: {},
  watch: {
    viewData(value) {
      if ("yName" in value) {
        this.option.yAxis.name = value.yName;
        this.$set(this.option.yAxis, "name", value.yName);
      } else {
        this.viewData.yName = "";
      }
      if ("yType" in value) {
        this.$set(this.option.yAxis, "type", value.yType);
      }
      if ("grid" in value) {
        this.option.grid = value.grid;
      } else {
        this.option.grid = Style.grid;
      }
      if ("dataZoom" in value) {
        this.option.dataZoom = value.dataZoom;
      } else {
        this.option.dataZoom = Style.dataZoom;
      }
      if (value.xData.length === 1) {
        value.xData[0].axisPointer.label.margin = -100;
      } else if (value.xData.length === 2) {
        value.xData[0].axisPointer.label.margin = -70;
        value.xData[1].axisPointer.label.margin = -100;
      }
      this.option.legend = value.lData;
      this.option.xAxis = value.xData;
      //给y加上测试要求的颜色,x轴不做处理，因为必须要有颜色
      this.option.yAxis.nameTextStyle = {
        // padding: [27, 0, 0, 0],
        color:this.lineColor,//y轴单位的颜色
      }
      this.option.yAxis.axisLine = {
        show: false,//x轴,测试要求加上
        lineStyle: {
          type: 'solid',
          color: this.lineColor,//y轴线的颜色
        }
      }
      this.option.yAxis.axisLabel = {
        color:this.lineColor,//y轴文字的颜色
      }
      this.option.yAxis.axisTick = {
        show: false,//测试要求不显示刻度线
      }
      this.option.yAxis.splitLine = {
        show: true,//测试要求不显示刻度线show: true,
        lineStyle: {
          type: "dashed",
          color: "#e8e8e8"
        }
      }
      this.option.series = value.sData;
      let myChart = this.$echarts.init(this.$refs.main);
      this.$nextTick(() => {
        myChart.setOption(this.option, true);
      });
    }
  },
  methods: {},
  created() {},
  mounted() {
  },
  beforeCreate() {}, // 生命周期 - 创建之前
  beforeMount() {}, // 生命周期 - 挂载之前
  beforeUpdate() {}, // 生命周期 - 更新之前
  updated() {}, // 生命周期 - 更新之后
  beforeDestroy() {}, // 生命周期 - 销毁之前
  destroyed() {}, // 生命周期 - 销毁完成
  activated() {} // 如果页面有keep-alive缓存功能，这个函数会触发
};
</script>
<style lang='scss' scoped>
</style>
